<template>
    <div class="box-right-bottom panel">
        <!-- 发电量排行 -->
        <div class="x-content-box">
            <h1 class="x-title">发电量排行</h1>
            <ul class="x-title-tabs">
                <!-- 选中状态追加 tab-active -->
                <li :class="baseClazz('dp')" @click="onClick('dp')">
                    <a href="javascript:void(0)">日统计</a>
                </li>
                <li :class="baseClazz('totalElectric')" @click="onClick('totalElectric')">
                    <a href="javascript:void(0)">累计统计</a>
                </li>
                <li :class="baseClazz('p')" @click="onClick('p')">
                    <a href="javascript:void(0)">功率统计</a>
                </li>
            </ul>

            <!-- TOP5 -->
            <div class="ranking-wrap">
                <h2>发电量TOP5</h2>
                <ul class="ranking-list">
                    <li v-for="(item, index) in rank.top" :key="item.id">
                        <em>{{ index + 1 }}</em>
                        <p>{{ item.name }}</p>
                        <span>{{ value(item) }}</span>
                    </li>
                </ul>
            </div>

            <!-- 倒数TOP5 -->
            <div class="ranking-wrap">
                <h2>发电量倒数TOP5</h2>
                <ul class="ranking-list">
                    <li v-for="(item, index) in rank.down" :key="item.id">
                        <em>{{ index + 1 }}</em>
                        <p>{{ item.name }}</p>
                        <span>{{ value(item) }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { queryRank } from '/@/api/Iframe/Home/index.js'
import { SUCCESS_CODE } from '@iframe/tools/axios/axios.js'

const field = ref('dp')
const rank = reactive({
    top: [],
    down: []
})

const baseClazz = computed(() => {
    return clazz => {
        return field.value === clazz ? 'tab-active' : ''
    }
})

const value = computed(() => {
    return item => {
        if (field.value === 'dp') {
            return item.dp + 'KWh'
        } else if (field.value === 'totalElectric') {
            return item.totalElectric + 'KWh'
        }
        return item.p + 'kW'
    }
})

const onClick = v => {
    field.value = v
    load()
}

onMounted(() => {
    load()
})

const queryTop = () => {
    queryRank({ pageNo: 1, pageNum: 5, field: field.value, sort: 'asc' }).then(result => {
        if (result.code === SUCCESS_CODE) {
            rank.top = result.data.records || []
        }
    })
}
const queryDown = () => {
    queryRank({ pageNo: 1, pageNum: 5, field: field.value, sort: 'desc' }).then(result => {
        if (result.code === SUCCESS_CODE) {
            rank.down = result.data.records || []
        }
    })
}
const load = () => {
    queryTop()
    queryDown()
}
</script>
<style lang="css" scoped>
.ranking-list li {
    box-sizing: content-box;
}
</style>
